<template>
  <div class="menu" style="margin-top: 70px">
    <a-menu
      mode="inline"
      :selectedKeys="[$route.path]"
      :default-open-keys="openKeys"
      :style="{ borderRight: 0, background: '#fff' }"
      @openChange="onOpenChange"
    >
      <!-- //循环一级菜单 -->
      <a-sub-menu v-for="item in menusList" :key="item.path">
        <span slot="title">
          <i
            :class="'iconfont   ' + item.icon"
            style="width: 14px; height: 18px; font-size: 18px"
          ></i
          ><span v-if="!collapsed">{{ item.title }}</span></span
        >
        <a-menu-item
          v-for="v in item.children"
          :key="`${item.path}/${v.path}`"
          @click="changeMenu(`${item.path}/${v.path}`, v.title)"
          >{{ v.title }}
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
// 引入VUEX映射
import { filtrationRouter } from "../../router/index";
import { mapState } from "vuex";
export default {
  props: ["collapsed"],
  created() {
    // 赋值给菜单栏
    this.menusList = filtrationRouter(this.Menslist);
    this.menusList.forEach((item) => {
      this.rootSubmenuKeys.push(item.path);
    });
  },
  data() {
    return {
      openKeys: [`/${this.$route.path.split("/")[1]}`],
      rootSubmenuKeys: [],
      menusList: [],
    };
  },
  methods: {
    changeMenu(route, name) {
      //获取路由对象并切换
      this.$router.push(route);
      let obj = {
        path: route,
        name: route,
        label: name,
      };
      let tag = JSON.parse(sessionStorage.getItem("tags"));
      var result = tag.some((item) => {
        if (item.name === route) {
          return true;
        }
      });
      // 如果不包含该对象，则添加
      if (!result) {
        tag.push(obj);
      }
      sessionStorage.setItem("tags", JSON.stringify(tag));
      sessionStorage.setItem("activePath", JSON.stringify(route));
    },
    //点击下拉其他关闭
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
  computed: {
    ...mapState(["Menslist"]),
  },
};
</script>

<style lang="less">
</style>